<!-- 首页内容文件 -->
<template>
  <div class="indexConnect" v-loading="loading" element-loading-text="拼命加载中...">
    <!-- 四格显示 -->
    <!-- <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple">
          上部分
          <div class="top"><span class="spanOne">10040篇</span></div>
          下部分
          <div class="buttom"><span>文章总数</span></div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          上部分
          <div class="top"><span class="spanTwo">1056篇</span></div>
          下部分
          <div class="buttom"><span>日新增文章数</span></div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          上部分
          <div class="top"><span class="spanThree">11148条</span></div>
          下部分
          <div class="buttom"><span>评论总数</span></div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          上部分
          <div class="top"><span class="spanFour">420条</span></div>
          下部分
          <div class="buttom"><span>日新增评论数</span></div>
        </div>
      </el-col>
    </el-row> -->

    <!-- 测试四个表格显示 -->
    <div class="indexTopBox">
      <ul>
        <li>
          <div class="box boxBorder">
            <div>
              <p>10040</p>
              <p>文章总数</p>
            </div>
            <div class="imgBox"><img src="@/assets/文章总数.svg" alt=""></div>
          </div>
        </li>
        <li>
          <div class="box boxBorder">
            <div>
              <p>1056</p>
              <p>日新增文章数</p>
            </div>
            <div class="imgBox"><img src="@/assets/文章.svg" alt=""></div>
          </div>
        </li>
        <li>
          <div class="box boxBorder">
            <div>
              <p>11148</p>
              <p>评论总数</p>
            </div>
            <div class="imgBox"><img src="@/assets/评论总数.svg" alt=""></div>
          </div>
        </li>
        <li>
          <div class="box">
            <div>
              <p>420</p>
              <p>日新增评论数</p>
            </div>
            <div class="imgBox"><img src="@/assets/日增评论.svg" alt=""></div>
          </div>
        </li>
      </ul>
    </div>

    <!-- 两格表格 -->
    <el-row :gutter="20">
      <el-col :span="20">
        <div class="grid-content bg-purple echartOne"></div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple echartTwo"></div>
      </el-col>
    </el-row>

    <!-- 一个大图表 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="grid-content bg-purple echartThree"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import store from '@/store'
export default {
  name: 'indexConnect',
  async created () {
    store.commit('user/NewSetToken', localStorage.getItem('token'))

    this.loading = true

    // 控制个人信息显示隐藏
    this.$emit('setIndexisSHow', false)

    this.loading = false
  },
  mounted () {
    this.$emit('setLoading', false)
    // 基于准备好的dom，初始化echarts实例
    const myChartOne = echarts.init(document.querySelector('.echartOne'))
    // 绘制图表
    myChartOne.setOption({
      // color: ['red'],
      tooltip: {
        trigger: 'axis',
        confine: true, // 将tooltip框限制在图表的区域内
        // 自定义悬浮框显示内容
        formatter: function (params) {
          // console.log(params)
          let html = '<div class="tooltip">'
          html += '<div class="tooltip-title">' + params[0].axisValueLabel + '</div> '
          html += '<div class="tooltip-content">'
          html += '<span class="tooltip-label">新增文章 </span >'
          html += '<span class="tooltip-value">' + params[0].data + '</span> '
          html += '<span class="tooltip-label">个</span >'
          html += '</div>'
          html += '</div>'
          return html
        }
      },
      // 工具小图标
      toolbox: {
        top: 25,
        right: 20,
        show: true,
        // 设置每个图标间距
        itemGap: 20,
        feature: {
          // 数据视图
          dataView: { readOnly: false, icon: 'path://M3.90010255,3.12544879 L6.4997502,3.12544879 C6.67939893,3.12544879 6.83212139,3.1858774 6.95939011,3.3088332 C7.08634329,3.42963986 7.15013542,3.57757618 7.15013542,3.75051832 C7.15013542,3.92346046 7.08634329,4.06934879 6.95949529,4.19220344 C6.83212139,4.31308596 6.67939893,4.37561314 6.4997502,4.37561314 L3.89999737,4.37561314 C3.720559,4.37561314 3.56762617,4.31308596 3.44046263,4.19220344 C3.31319391,4.06934879 3.24982251,3.92346046 3.24982251,3.75051832 C3.24982251,3.57747504 3.31319391,3.42963986 3.44046263,3.3088332 C3.56762617,3.18577627 3.720559,3.12544879 3.90010255,3.12544879 M3.90010255,5.6237042 L9.09997633,5.6237042 C9.27933582,5.6237042 9.43237383,5.68623138 9.55964255,5.80711389 C9.68649054,5.92996855 9.75017749,6.07793016 9.75017749,6.2508723 C9.75017749,6.42174115 9.68649054,6.56967748 9.55974773,6.69265856 C9.43237383,6.81343993 9.27933582,6.87596711 9.09997633,6.87604296 L3.89999737,6.87604296 C3.720559,6.87604296 3.56762617,6.81343993 3.44046263,6.69265856 C3.31319391,6.56957634 3.24982251,6.42174115 3.24982251,6.2508723 C3.24982251,6.07793016 3.31319391,5.92989269 3.44046263,5.80711389 C3.56762617,5.68623138 3.720559,5.6237042 3.90010255,5.6237042 M11.0491073,1.25018963 L1.94955167,1.25018963 C1.76998182,1.25018963 1.61725935,1.31061824 1.48988545,1.43349818 C1.36303746,1.5543807 1.29914015,1.70231702 1.29914015,1.87525916 L1.29914015,13.1247408 C1.29914015,13.297683 1.36314264,13.4457204 1.48978027,13.5665271 C1.61725935,13.6893818 1.76998182,13.7519089 1.94955167,13.7519089 L11.0492125,13.7519089 C11.2286508,13.7519089 11.3822147,13.6893818 11.5085631,13.5665271 C11.6365418,13.4456193 11.6999132,13.297683 11.6999132,13.1247408 L11.6999132,1.87525916 C11.6999132,1.70231702 11.6365418,1.55427956 11.5085631,1.43349818 C11.3822147,1.31061824 11.2286508,1.25018963 11.0492125,1.25018963 M3.90010255,8.12405817 L9.10008152,8.12405817 C9.279441,8.12405817 9.43247901,8.18448679 9.55974773,8.30736673 C9.68659572,8.43042366 9.75028267,8.57828413 9.75028267,8.7491277 C9.75028267,8.92206984 9.68659572,9.07013259 9.55985291,9.19091396 C9.43247901,9.31376862 9.279441,9.3762958 9.10008152,9.3762958 L3.90010255,9.3762958 C3.72066418,9.3762958 3.56773135,9.31376862 3.44056781,9.19091396 C3.31340428,9.07003145 3.25003287,8.92196871 3.25003287,8.74905185 C3.25003287,8.578183 3.31340428,8.43022139 3.440673,8.30726559 C3.56783653,8.1843098 3.72076936,8.1238559 3.90031291,8.1238559 M3.90031291,10.624311 L9.09997633,10.624311 C9.27933582,10.624311 9.43237383,10.6868129 9.55964255,10.8076954 C9.68649054,10.9305754 9.75017749,11.0785117 9.75017749,11.2493805 C9.75017749,11.4224238 9.68649054,11.5702843 9.55974773,11.6910657 C9.43237383,11.8141226 9.27933582,11.8765486 9.09997633,11.8765486 L3.89999737,11.8765486 C3.720559,11.8765486 3.56762617,11.8140215 3.44046263,11.6910657 C3.31319391,11.5702843 3.24982251,11.4223227 3.24982251,11.2493805 C3.24982251,11.0785117 3.31319391,10.9305754 3.44046263,10.8076954 C3.56762617,10.6868129 3.720559,10.624311 3.90010255,10.624311 M1.94994609,0 L11.0499487,0 C11.5877642,0 12.0478249,0.181336408 12.428474,0.547953518 C12.8096491,0.914671764 13,1.35645802 13,1.87525916 L13,13.1247408 C13,13.641494 12.8095702,14.0853282 12.4285792,14.4498721 C12.0479301,14.8165903 11.5878694,15 11.0500276,15 L1.95005128,15 C1.41213058,15 0.952280299,14.8165903 0.571604836,14.4499732 C0.190429765,14.0852271 0,13.6413928 0,13.1246397 L0,1.87525916 C0,1.35645802 0.190429765,0.914671764 0.571604836,0.547953518 C0.952175118,0.181336408 1.41213058,0 1.95005128,0' },
          // 切换类型
          magicType: { type: ['line', 'bar'] },

          // 还原
          restore: { show: true, icon: 'path://M7.00004272,0 C3.11122694,0 0,3.11109022 0,6.99997437 C0,10.8888414 3.11122694,14 7.00004272,14 C10.8889781,14 14,10.8888414 14,6.99997437 C14,6.61111159 13.7408493,6.35182416 13.3518498,6.35182416 C12.9630041,6.35182416 12.703785,6.61111159 12.703785,6.99997437 C12.703785,10.1110646 10.1111329,12.703785 7.00004272,12.703785 C3.8889525,12.703785 1.29630041,10.1110646 1.29630041,6.99997437 C1.29630041,3.8889525 3.8889525,1.29630041 7.00004272,1.29630041 C8.03703862,1.29630041 9.20369532,1.55557075 9.9815405,2.20365259 L9.9815405,2.33329631 L9.33340739,3.11109022 C9.07411996,3.37037765 9.33340739,3.8889525 9.72227017,3.8889525 L12.703785,4.01852785 C12.9630041,4.01852785 13.2222744,3.62959672 13.2222744,3.37037765 L12.3148539,0.518506492 C12.1852102,0.129643713 11.6667037,0 11.4074846,0.388862779 L10.8889781,1.16658834 C9.72227017,0.388862779 8.42596976,0 7.00004272,0 Z' },
          // 保存为图片
          saveAsImage: {
            icon: 'path://M9.50099376,15.2858175 C9.50099376,15.6802571 9.16539877,16 8.75137896,16 L8.00178612,16 C6.48239578,16.0015671 5.20201338,14.9200439 5.02144522,13.482665 C4.84094295,12.0453489 5.81728916,10.7065434 7.29411794,10.3663599 C7.59352024,8.13476618 9.42043866,6.36848191 11.7580738,6.050457 C14.095599,5.73249487 16.3682937,6.94111088 17.3113462,9.00367995 C19.0992389,9.50577389 20.2281961,11.183382 19.9609676,12.94092 C19.6938268,14.6985417 18.1115605,16.0019646 16.2475709,16 C15.8335731,15.9998513 15.4981318,15.6799223 15.4983075,15.2854827 C15.498571,14.8910222 15.8343417,14.5714489 16.2483615,14.5716163 C17.3673702,14.5738133 18.3178017,13.79186 18.4785605,12.7367429 C18.6392535,11.6816468 17.9612774,10.6744249 16.887817,10.3734741 L16.2176373,10.1849901 L15.9379784,9.57501163 C15.2648778,8.10141322 13.641697,7.23764677 11.9718478,7.46429627 C10.3019108,7.69094578 8.99649222,8.95226952 8.78210322,10.5463487 L8.65239809,11.5233981 L7.64789713,11.7547973 C6.91477548,11.9297016 6.43254298,12.59674 6.52227802,13.3117572 C6.6121009,14.0266908 7.24600011,14.566469 8.00178612,14.5716163 L8.75137896,14.5716163 C9.16539877,14.5716163 9.50099376,14.891357 9.50099376,15.2858175 Z M13.8087422,16.7544623 C14.0637526,17.0337759 14.0637526,17.4864138 13.8087422,17.7656436 L11.9581042,19.7908134 C11.7027303,20.0697289 11.2893835,20.0697289 11.0340096,19.7908134 L9.18329508,17.7656436 C8.93584184,17.4850311 8.93936212,17.0390135 9.19129225,16.7632197 C9.44314586,16.487342 9.85044693,16.4834871 10.1067009,16.7544623 L10.8439715,17.5618779 L10.8439715,11.7150862 C10.8439715,11.3201463 11.1364041,11 11.4969848,11 C11.8576612,11 12.1500938,11.3201463 12.1500938,11.7150862 L12.1500938,17.5596572 L12.8854129,16.7544623 C13.1404042,16.4752954 13.553751,16.4752954 13.8087422,16.7544623 Z'
          }
        }
      },
      // 标题
      title: [
        {
          top: 25,
          left: '80px',
          // 主标题
          text: '月新增文章数'
          // // 副标题
          // subtext: '新增文章'
        }
      ],
      xAxis: {
        top: '50px',
        type: 'category',
        boundaryGap: false,
        // 底部文字
        data: ['2019.4.13', '2019.5.13', '2019.6.13', '2019.7.13', '2019.8.13', '2019.9.13', '2019.10.13', '2019.11.13', '2019.12.13'],
        axisLabel: {
          margin: 28
        }
      },
      yAxis: {
        // name: '月新增文章数',
        nameTextStyle: {
          padding: [0, 0, 10, -30] // 上右下左与原位置距离
        },
        type: 'value'
      },
      series: [
        {
          // 数据
          data: [234, 223, 124, 164, 145, 123, 123, 79, 50],
          type: 'line',
          // showSymbol: false, // 隐藏默认圆点
          smooth: true, // 平滑线条
          symbol: 'circle', // 设定为实心点
          symbolSize: 8, // 设定实心点的大小
          emphasis: {
            // 鼠标hover上去的时候，圆点的颜色和样式
            itemStyle: {
              color: '#fff', // 颜色
              borderColor: '#0072FF', // 图形的描边颜色
              borderWidth: 2 // 描边的线宽
            }
          },
          // 修改圆点颜色
          itemStyle: {
            // color: 'inherit'
          },
          // 线条渐变色
          lineStyle: {
            normal: {
              width: 3,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1, // 从左到右
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: '#9DECE1 ' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#646EEB' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              }
            }
          },
          // 图形渐变色
          areaStyle: { // 折线颜色不取渐变色，取color设置值
            normal: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0, // 从左到右，但不能从上到下，需要借助辅助系列
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(157, 236, 225,0.7)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(100, 110, 235,0)' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              }
            }
          }

        }
      ],
      // 调整折线图位置
      grid: {
        show: false,
        top: '20%',
        right: '5%',
        bottom: '15%',
        left: '10%'
      }
    })

    // 第二个图表
    // 基于准备好的dom，初始化echarts实例
    const myChartTwo = echarts.init(document.querySelector('.echartTwo'))
    const data = [
      { value: 1048, name: '奇趣事' },
      { value: 735, name: '会生活' },
      { value: 580, name: '爱旅行' },
      { value: 484, name: '趣美味' }
    ]
    let Num = 0
    data.forEach(item => {
      Num += item.value
    })
    myChartTwo.setOption({
      color: ['#5482fa', '#586ee6', '#7dbfff', '#68deb3'],
      title: {
        top: 20,
        left: 20,
        text: '分类文章数量比'
      },
      toolbox: {
        left: 'center',
        bottom: 20,
        show: true,
        // 设置每个图标间距
        itemGap: 20,
        feature: {
          // 数据视图
          dataView: { readOnly: false, icon: 'path://M3.90010255,3.12544879 L6.4997502,3.12544879 C6.67939893,3.12544879 6.83212139,3.1858774 6.95939011,3.3088332 C7.08634329,3.42963986 7.15013542,3.57757618 7.15013542,3.75051832 C7.15013542,3.92346046 7.08634329,4.06934879 6.95949529,4.19220344 C6.83212139,4.31308596 6.67939893,4.37561314 6.4997502,4.37561314 L3.89999737,4.37561314 C3.720559,4.37561314 3.56762617,4.31308596 3.44046263,4.19220344 C3.31319391,4.06934879 3.24982251,3.92346046 3.24982251,3.75051832 C3.24982251,3.57747504 3.31319391,3.42963986 3.44046263,3.3088332 C3.56762617,3.18577627 3.720559,3.12544879 3.90010255,3.12544879 M3.90010255,5.6237042 L9.09997633,5.6237042 C9.27933582,5.6237042 9.43237383,5.68623138 9.55964255,5.80711389 C9.68649054,5.92996855 9.75017749,6.07793016 9.75017749,6.2508723 C9.75017749,6.42174115 9.68649054,6.56967748 9.55974773,6.69265856 C9.43237383,6.81343993 9.27933582,6.87596711 9.09997633,6.87604296 L3.89999737,6.87604296 C3.720559,6.87604296 3.56762617,6.81343993 3.44046263,6.69265856 C3.31319391,6.56957634 3.24982251,6.42174115 3.24982251,6.2508723 C3.24982251,6.07793016 3.31319391,5.92989269 3.44046263,5.80711389 C3.56762617,5.68623138 3.720559,5.6237042 3.90010255,5.6237042 M11.0491073,1.25018963 L1.94955167,1.25018963 C1.76998182,1.25018963 1.61725935,1.31061824 1.48988545,1.43349818 C1.36303746,1.5543807 1.29914015,1.70231702 1.29914015,1.87525916 L1.29914015,13.1247408 C1.29914015,13.297683 1.36314264,13.4457204 1.48978027,13.5665271 C1.61725935,13.6893818 1.76998182,13.7519089 1.94955167,13.7519089 L11.0492125,13.7519089 C11.2286508,13.7519089 11.3822147,13.6893818 11.5085631,13.5665271 C11.6365418,13.4456193 11.6999132,13.297683 11.6999132,13.1247408 L11.6999132,1.87525916 C11.6999132,1.70231702 11.6365418,1.55427956 11.5085631,1.43349818 C11.3822147,1.31061824 11.2286508,1.25018963 11.0492125,1.25018963 M3.90010255,8.12405817 L9.10008152,8.12405817 C9.279441,8.12405817 9.43247901,8.18448679 9.55974773,8.30736673 C9.68659572,8.43042366 9.75028267,8.57828413 9.75028267,8.7491277 C9.75028267,8.92206984 9.68659572,9.07013259 9.55985291,9.19091396 C9.43247901,9.31376862 9.279441,9.3762958 9.10008152,9.3762958 L3.90010255,9.3762958 C3.72066418,9.3762958 3.56773135,9.31376862 3.44056781,9.19091396 C3.31340428,9.07003145 3.25003287,8.92196871 3.25003287,8.74905185 C3.25003287,8.578183 3.31340428,8.43022139 3.440673,8.30726559 C3.56783653,8.1843098 3.72076936,8.1238559 3.90031291,8.1238559 M3.90031291,10.624311 L9.09997633,10.624311 C9.27933582,10.624311 9.43237383,10.6868129 9.55964255,10.8076954 C9.68649054,10.9305754 9.75017749,11.0785117 9.75017749,11.2493805 C9.75017749,11.4224238 9.68649054,11.5702843 9.55974773,11.6910657 C9.43237383,11.8141226 9.27933582,11.8765486 9.09997633,11.8765486 L3.89999737,11.8765486 C3.720559,11.8765486 3.56762617,11.8140215 3.44046263,11.6910657 C3.31319391,11.5702843 3.24982251,11.4223227 3.24982251,11.2493805 C3.24982251,11.0785117 3.31319391,10.9305754 3.44046263,10.8076954 C3.56762617,10.6868129 3.720559,10.624311 3.90010255,10.624311 M1.94994609,0 L11.0499487,0 C11.5877642,0 12.0478249,0.181336408 12.428474,0.547953518 C12.8096491,0.914671764 13,1.35645802 13,1.87525916 L13,13.1247408 C13,13.641494 12.8095702,14.0853282 12.4285792,14.4498721 C12.0479301,14.8165903 11.5878694,15 11.0500276,15 L1.95005128,15 C1.41213058,15 0.952280299,14.8165903 0.571604836,14.4499732 C0.190429765,14.0852271 0,13.6413928 0,13.1246397 L0,1.87525916 C0,1.35645802 0.190429765,0.914671764 0.571604836,0.547953518 C0.952175118,0.181336408 1.41213058,0 1.95005128,0' },
          // 切换类型
          magicType: { type: ['line', 'bar'] },

          // 还原
          restore: { show: true, icon: 'path://M7.00004272,0 C3.11122694,0 0,3.11109022 0,6.99997437 C0,10.8888414 3.11122694,14 7.00004272,14 C10.8889781,14 14,10.8888414 14,6.99997437 C14,6.61111159 13.7408493,6.35182416 13.3518498,6.35182416 C12.9630041,6.35182416 12.703785,6.61111159 12.703785,6.99997437 C12.703785,10.1110646 10.1111329,12.703785 7.00004272,12.703785 C3.8889525,12.703785 1.29630041,10.1110646 1.29630041,6.99997437 C1.29630041,3.8889525 3.8889525,1.29630041 7.00004272,1.29630041 C8.03703862,1.29630041 9.20369532,1.55557075 9.9815405,2.20365259 L9.9815405,2.33329631 L9.33340739,3.11109022 C9.07411996,3.37037765 9.33340739,3.8889525 9.72227017,3.8889525 L12.703785,4.01852785 C12.9630041,4.01852785 13.2222744,3.62959672 13.2222744,3.37037765 L12.3148539,0.518506492 C12.1852102,0.129643713 11.6667037,0 11.4074846,0.388862779 L10.8889781,1.16658834 C9.72227017,0.388862779 8.42596976,0 7.00004272,0 Z' },
          // 保存为图片
          saveAsImage: {
            icon: 'path://M9.50099376,15.2858175 C9.50099376,15.6802571 9.16539877,16 8.75137896,16 L8.00178612,16 C6.48239578,16.0015671 5.20201338,14.9200439 5.02144522,13.482665 C4.84094295,12.0453489 5.81728916,10.7065434 7.29411794,10.3663599 C7.59352024,8.13476618 9.42043866,6.36848191 11.7580738,6.050457 C14.095599,5.73249487 16.3682937,6.94111088 17.3113462,9.00367995 C19.0992389,9.50577389 20.2281961,11.183382 19.9609676,12.94092 C19.6938268,14.6985417 18.1115605,16.0019646 16.2475709,16 C15.8335731,15.9998513 15.4981318,15.6799223 15.4983075,15.2854827 C15.498571,14.8910222 15.8343417,14.5714489 16.2483615,14.5716163 C17.3673702,14.5738133 18.3178017,13.79186 18.4785605,12.7367429 C18.6392535,11.6816468 17.9612774,10.6744249 16.887817,10.3734741 L16.2176373,10.1849901 L15.9379784,9.57501163 C15.2648778,8.10141322 13.641697,7.23764677 11.9718478,7.46429627 C10.3019108,7.69094578 8.99649222,8.95226952 8.78210322,10.5463487 L8.65239809,11.5233981 L7.64789713,11.7547973 C6.91477548,11.9297016 6.43254298,12.59674 6.52227802,13.3117572 C6.6121009,14.0266908 7.24600011,14.566469 8.00178612,14.5716163 L8.75137896,14.5716163 C9.16539877,14.5716163 9.50099376,14.891357 9.50099376,15.2858175 Z M13.8087422,16.7544623 C14.0637526,17.0337759 14.0637526,17.4864138 13.8087422,17.7656436 L11.9581042,19.7908134 C11.7027303,20.0697289 11.2893835,20.0697289 11.0340096,19.7908134 L9.18329508,17.7656436 C8.93584184,17.4850311 8.93936212,17.0390135 9.19129225,16.7632197 C9.44314586,16.487342 9.85044693,16.4834871 10.1067009,16.7544623 L10.8439715,17.5618779 L10.8439715,11.7150862 C10.8439715,11.3201463 11.1364041,11 11.4969848,11 C11.8576612,11 12.1500938,11.3201463 12.1500938,11.7150862 L12.1500938,17.5596572 L12.8854129,16.7544623 C13.1404042,16.4752954 13.553751,16.4752954 13.8087422,16.7544623 Z'
          }
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: function (params) {
          // params  整个饼图的数据
          // console.log(params)
          // 悬停显示的格式
          return `${params.name}：${params.value}(${params.percent}%)`
        }
      },
      legend: {
        // show: false,
        left: 20,
        bottom: 90,
        width: 10,
        // 关键的在这
        formatter: function (name) {
          // 通过name获取到数组对象中的单个对象
          const singleData = data.filter(function (item) {
            return item.name === name
          })
          // console.log(singleData)
          // singleData.forEach(item => {
          //   Num += item.value
          // })
          const num = (singleData[0].value / Num) * 100
          return name + '                  ' + num.toFixed(2) + '%'
        },
        textStyle: {
          color: '#5A607F',
          fontSize: 14
        }
      },
      series: [
        {
          // 悬浮显示的信息
          // name: 'Access From',
          type: 'pie',
          // 设置饼图位置
          center: ['50%', '30%'],
          // 设置圈大小
          radius: ['40%', '60%'],
          data: data,
          itemStyle: {
            normal: {
              // 设置饼图间距
              borderColor: '#fff', // 间隔背景色
              borderWidth: 5 // 距离
            }
          },
          // 隐藏饼图的线
          labelLine: {
            show: false
          },
          // 隐藏饼图外面显示的文字
          label: {
            show: false
          }
        }
      ]
    })

    // 第三个图表
    // 基于准备好的dom，初始化echarts实例
    const myChartThree = echarts.init(document.querySelector('.echartThree'))
    myChartThree.setOption({
      // 工具小图标
      toolbox: {
        top: 20,
        right: 40,
        show: true,
        // 设置每个图标间距
        itemGap: 20,
        feature: {
          // 数据视图
          dataView: { readOnly: false, icon: 'path://M3.90010255,3.12544879 L6.4997502,3.12544879 C6.67939893,3.12544879 6.83212139,3.1858774 6.95939011,3.3088332 C7.08634329,3.42963986 7.15013542,3.57757618 7.15013542,3.75051832 C7.15013542,3.92346046 7.08634329,4.06934879 6.95949529,4.19220344 C6.83212139,4.31308596 6.67939893,4.37561314 6.4997502,4.37561314 L3.89999737,4.37561314 C3.720559,4.37561314 3.56762617,4.31308596 3.44046263,4.19220344 C3.31319391,4.06934879 3.24982251,3.92346046 3.24982251,3.75051832 C3.24982251,3.57747504 3.31319391,3.42963986 3.44046263,3.3088332 C3.56762617,3.18577627 3.720559,3.12544879 3.90010255,3.12544879 M3.90010255,5.6237042 L9.09997633,5.6237042 C9.27933582,5.6237042 9.43237383,5.68623138 9.55964255,5.80711389 C9.68649054,5.92996855 9.75017749,6.07793016 9.75017749,6.2508723 C9.75017749,6.42174115 9.68649054,6.56967748 9.55974773,6.69265856 C9.43237383,6.81343993 9.27933582,6.87596711 9.09997633,6.87604296 L3.89999737,6.87604296 C3.720559,6.87604296 3.56762617,6.81343993 3.44046263,6.69265856 C3.31319391,6.56957634 3.24982251,6.42174115 3.24982251,6.2508723 C3.24982251,6.07793016 3.31319391,5.92989269 3.44046263,5.80711389 C3.56762617,5.68623138 3.720559,5.6237042 3.90010255,5.6237042 M11.0491073,1.25018963 L1.94955167,1.25018963 C1.76998182,1.25018963 1.61725935,1.31061824 1.48988545,1.43349818 C1.36303746,1.5543807 1.29914015,1.70231702 1.29914015,1.87525916 L1.29914015,13.1247408 C1.29914015,13.297683 1.36314264,13.4457204 1.48978027,13.5665271 C1.61725935,13.6893818 1.76998182,13.7519089 1.94955167,13.7519089 L11.0492125,13.7519089 C11.2286508,13.7519089 11.3822147,13.6893818 11.5085631,13.5665271 C11.6365418,13.4456193 11.6999132,13.297683 11.6999132,13.1247408 L11.6999132,1.87525916 C11.6999132,1.70231702 11.6365418,1.55427956 11.5085631,1.43349818 C11.3822147,1.31061824 11.2286508,1.25018963 11.0492125,1.25018963 M3.90010255,8.12405817 L9.10008152,8.12405817 C9.279441,8.12405817 9.43247901,8.18448679 9.55974773,8.30736673 C9.68659572,8.43042366 9.75028267,8.57828413 9.75028267,8.7491277 C9.75028267,8.92206984 9.68659572,9.07013259 9.55985291,9.19091396 C9.43247901,9.31376862 9.279441,9.3762958 9.10008152,9.3762958 L3.90010255,9.3762958 C3.72066418,9.3762958 3.56773135,9.31376862 3.44056781,9.19091396 C3.31340428,9.07003145 3.25003287,8.92196871 3.25003287,8.74905185 C3.25003287,8.578183 3.31340428,8.43022139 3.440673,8.30726559 C3.56783653,8.1843098 3.72076936,8.1238559 3.90031291,8.1238559 M3.90031291,10.624311 L9.09997633,10.624311 C9.27933582,10.624311 9.43237383,10.6868129 9.55964255,10.8076954 C9.68649054,10.9305754 9.75017749,11.0785117 9.75017749,11.2493805 C9.75017749,11.4224238 9.68649054,11.5702843 9.55974773,11.6910657 C9.43237383,11.8141226 9.27933582,11.8765486 9.09997633,11.8765486 L3.89999737,11.8765486 C3.720559,11.8765486 3.56762617,11.8140215 3.44046263,11.6910657 C3.31319391,11.5702843 3.24982251,11.4223227 3.24982251,11.2493805 C3.24982251,11.0785117 3.31319391,10.9305754 3.44046263,10.8076954 C3.56762617,10.6868129 3.720559,10.624311 3.90010255,10.624311 M1.94994609,0 L11.0499487,0 C11.5877642,0 12.0478249,0.181336408 12.428474,0.547953518 C12.8096491,0.914671764 13,1.35645802 13,1.87525916 L13,13.1247408 C13,13.641494 12.8095702,14.0853282 12.4285792,14.4498721 C12.0479301,14.8165903 11.5878694,15 11.0500276,15 L1.95005128,15 C1.41213058,15 0.952280299,14.8165903 0.571604836,14.4499732 C0.190429765,14.0852271 0,13.6413928 0,13.1246397 L0,1.87525916 C0,1.35645802 0.190429765,0.914671764 0.571604836,0.547953518 C0.952175118,0.181336408 1.41213058,0 1.95005128,0' },
          // 切换类型
          magicType: { type: ['line', 'bar'] },

          // 还原
          restore: { show: true, icon: 'path://M7.00004272,0 C3.11122694,0 0,3.11109022 0,6.99997437 C0,10.8888414 3.11122694,14 7.00004272,14 C10.8889781,14 14,10.8888414 14,6.99997437 C14,6.61111159 13.7408493,6.35182416 13.3518498,6.35182416 C12.9630041,6.35182416 12.703785,6.61111159 12.703785,6.99997437 C12.703785,10.1110646 10.1111329,12.703785 7.00004272,12.703785 C3.8889525,12.703785 1.29630041,10.1110646 1.29630041,6.99997437 C1.29630041,3.8889525 3.8889525,1.29630041 7.00004272,1.29630041 C8.03703862,1.29630041 9.20369532,1.55557075 9.9815405,2.20365259 L9.9815405,2.33329631 L9.33340739,3.11109022 C9.07411996,3.37037765 9.33340739,3.8889525 9.72227017,3.8889525 L12.703785,4.01852785 C12.9630041,4.01852785 13.2222744,3.62959672 13.2222744,3.37037765 L12.3148539,0.518506492 C12.1852102,0.129643713 11.6667037,0 11.4074846,0.388862779 L10.8889781,1.16658834 C9.72227017,0.388862779 8.42596976,0 7.00004272,0 Z' },
          // 保存为图片
          saveAsImage: {
            icon: 'path://M9.50099376,15.2858175 C9.50099376,15.6802571 9.16539877,16 8.75137896,16 L8.00178612,16 C6.48239578,16.0015671 5.20201338,14.9200439 5.02144522,13.482665 C4.84094295,12.0453489 5.81728916,10.7065434 7.29411794,10.3663599 C7.59352024,8.13476618 9.42043866,6.36848191 11.7580738,6.050457 C14.095599,5.73249487 16.3682937,6.94111088 17.3113462,9.00367995 C19.0992389,9.50577389 20.2281961,11.183382 19.9609676,12.94092 C19.6938268,14.6985417 18.1115605,16.0019646 16.2475709,16 C15.8335731,15.9998513 15.4981318,15.6799223 15.4983075,15.2854827 C15.498571,14.8910222 15.8343417,14.5714489 16.2483615,14.5716163 C17.3673702,14.5738133 18.3178017,13.79186 18.4785605,12.7367429 C18.6392535,11.6816468 17.9612774,10.6744249 16.887817,10.3734741 L16.2176373,10.1849901 L15.9379784,9.57501163 C15.2648778,8.10141322 13.641697,7.23764677 11.9718478,7.46429627 C10.3019108,7.69094578 8.99649222,8.95226952 8.78210322,10.5463487 L8.65239809,11.5233981 L7.64789713,11.7547973 C6.91477548,11.9297016 6.43254298,12.59674 6.52227802,13.3117572 C6.6121009,14.0266908 7.24600011,14.566469 8.00178612,14.5716163 L8.75137896,14.5716163 C9.16539877,14.5716163 9.50099376,14.891357 9.50099376,15.2858175 Z M13.8087422,16.7544623 C14.0637526,17.0337759 14.0637526,17.4864138 13.8087422,17.7656436 L11.9581042,19.7908134 C11.7027303,20.0697289 11.2893835,20.0697289 11.0340096,19.7908134 L9.18329508,17.7656436 C8.93584184,17.4850311 8.93936212,17.0390135 9.19129225,16.7632197 C9.44314586,16.487342 9.85044693,16.4834871 10.1067009,16.7544623 L10.8439715,17.5618779 L10.8439715,11.7150862 C10.8439715,11.3201463 11.1364041,11 11.4969848,11 C11.8576612,11 12.1500938,11.3201463 12.1500938,11.7150862 L12.1500938,17.5596572 L12.8854129,16.7544623 C13.1404042,16.4752954 13.553751,16.4752954 13.8087422,16.7544623 Z'
          }
        }
      },
      color: ['#7dbfff', '#5482fa', '#586ee6', '#68deb3'],
      title: [{
        top: '24px',
        left: '40px',
        // 主标题
        text: '文章访问量'
      }],
      legend: {
        top: '60px',
        left: '40px'
      },
      // 调整整个柱状图位置
      grid: {
        show: false,
        top: '30%',
        right: '5%',
        bottom: '10%',
        left: '5%'
      },
      tooltip: {
        confine: true, // 将tooltip框限制在图表的区域内
        // 自定义悬浮显示的内容
        formatter: function (params) {
          let html = '<div style="text-align: left;">'
          html += `<div>${params.data[0]}</div>`
          html += `<div style="display:flex;align-items:center;"><span  style="display:inline-block;width: 8px;height: 8px;background-color:#7dbfff;margin-right:3px;border-radius:3px;"></span>${params.dimensionNames[1]}：${params.value[1]}</div>`
          html += `<div style="display:flex;align-items:center;"><span  style="display:inline-block;width: 8px;height: 8px;background-color:#5482fa;margin-right:3px;border-radius:3px;"></span>${params.dimensionNames[2]}：${params.value[2]}</div>`
          html += `<div style="display:flex;align-items:center;"><span  style="display:inline-block;width: 8px;height: 8px;background-color:#586ee6;margin-right:3px;border-radius:3px;"></span>${params.dimensionNames[3]}：${params.value[3]}</div>`
          html += `<div style="display:flex;align-items:center;"><span  style="display:inline-block;width: 8px;height: 8px;background-color:#68deb3;margin-right:3px;border-radius:3px;"></span>${params.dimensionNames[4]}：${params.value[4]}</div>`
          html += '</div>'
          return html
        }
      },
      dataset: {
        source: [
          ['product', '奇趣事', '会生活', '爱旅行', '趣美味'],
          ['一月', 43.3, 85.8, 93.7, 90],
          ['二月', 83.1, 73.4, 55.1, 42],
          ['三月', 86.4, 65.2, 82.5, 81],
          ['四月', 72.4, 53.9, 39.1, 132],
          ['五月', 72.4, 53.9, 39.1, 132]
        ]
      },
      xAxis: { type: 'category' },
      yAxis: {},
      series: [
        {
          type: 'bar',
          // 调整柱状图粗细
          barWidth: '15px',
          // 设置柱状的间隔
          barGap: 1.1,
          itemStyle: {
            normal: {
              // 这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
              barBorderRadius: [10, 10, 0, 0]
            }
          }
        },
        {
          type: 'bar',
          // 调整柱状图粗细
          barWidth: '15px',
          itemStyle: {
            normal: {
              // 这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
              barBorderRadius: [10, 10, 0, 0]
            }
          }
        },
        {
          type: 'bar',
          // 调整柱状图粗细
          barWidth: '15px',
          itemStyle: {
            normal: {
              // 这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
              barBorderRadius: [10, 10, 0, 0]
            }
          }
        },
        {
          type: 'bar',
          // 调整柱状图粗细
          barWidth: '15px',
          itemStyle: {
            normal: {
              // 这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
              barBorderRadius: [10, 10, 0, 0]
            }
          }
        }
      ]
    })
  },
  data () {
    return {
      loading: false
    }
  }
}
</script>

<style lang="less">
// 通用样式
.articlePublish,
.articleAssort,
.articleTabulation,
.basicInfo,
.replaceHead,
.resetPassword {
  width: 100%;

  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 23px 30px;
    height: 68px;
    margin-bottom: 5px;
    border-radius: 4px 4px 0px 0px;
    background: #fff;
  }
}

.el-row {
  margin-bottom: 20px;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #fff;
}

.echartOne,
.echartTwo {
  height: 418px;
}

.echartThree {
  height: 420px;
}

.bg-purple {
  text-align: center;
  background: #FFFFFF;
  border-radius: 4px;

  .top {
    height: 88px;
    line-height: 88px;
    font-family: PingFangSC-Medium;
    font-size: 30px;
    letter-spacing: 0;
    font-weight: 500;

    .spanOne {
      color: #83A2ED;
    }

    .spanTwo {
      color: #69C6E2;
    }

    .spanThree {
      color: #5FD9DE;
    }

    .spanFour {
      color: #57D78E;
    }
  }

  .buttom {
    height: 32px;
    line-height: 32px;
    background: #E6E9F6;
    border-radius: 0px 0px 4px 4px;

    span {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #5A607F;
      letter-spacing: 0;
      line-height: 22px;
      font-weight: 400;
    }
  }

}

.bg-purple-light {
  background: #fff;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #fff;
}

.indexTopBox {
  height: 120px;
  margin-bottom: 20px;
  background: #fff;
  border-radius: 4px;

  ul {
    display: flex;
    height: 100%;

    li {
      list-style: none;
      flex: 1;
      padding: 20px 0;

      .box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 80px;
        padding: 0 60px;

        p:nth-child(1) {
          font-family: PingFangSC-Medium;
          font-size: 25px;
          color: #131523;
          letter-spacing: 0;
          line-height: 28px;
          font-weight: 500;
        }

        p:nth-child(2) {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #5A607F;
          letter-spacing: 0;
          line-height: 20px;
          font-weight: 400;
        }

        .imgBox {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 56px;
          height: 56px;
          border-radius: 50%;
          opacity: 0.6;
          background: #ECF2FE;
        }
      }

      .boxBorder {
        border-right: 1px solid #dadeed;
      }
    }
  }
}
</style>
